<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, nextTick } from 'vue'
import { getHomeBannerListApi, getClassifyListApi, getHotApi } from '@/services/home'
import Xtx_navbar from './components/Xtx_navbar.vue'
import Xtx_swiper from '@/components/Xtx_swiper.vue'
import Xtx_classify from './components/Xtx_classify.vue'
import Xtx_hot from './components/Xtx_hot.vue'
import Xtx_goodslist from '@/components/Xtx_goodslist.vue'
import { useGoodsList } from '@/composables/index'

const Xtx_swiper_Ref = ref<InstanceType<typeof Xtx_swiper>>()
const Xtx_classify_Ref = ref<InstanceType<typeof Xtx_classify>>()
const Xtx_hot_Ref = ref<InstanceType<typeof Xtx_hot>>()

const { Xtx_goodslist_Ref, onScrolltolower } = useGoodsList()

// 轮播数据
const getBannerList = async () => {
  const res = await getHomeBannerListApi({ distributionSite: 1 })
  nextTick(() => {
    Xtx_swiper_Ref.value?.getData(res.result)
  })
}

// 分类数据
const getClassifyList = async () => {
  const res = await getClassifyListApi({})
  nextTick(() => {
    Xtx_classify_Ref.value?.getData(res.result)
  })
}

// 热门推荐数据
const getHotList = async () => {
  const res = await getHotApi({})
  nextTick(() => {
    Xtx_hot_Ref.value?.getData(res.result)
  })
}


// 下拉刷新
const isLoad = ref(false)
const load = async () => {
  isLoad.value = true
  Xtx_goodslist_Ref.value?.reset()
  await Promise.all([
    getBannerList(),
    getClassifyList(),
    getHotList(),
    Xtx_goodslist_Ref.value?.getList(),
  ])
  isLoad.value = false
}
onLoad(() => {
  getBannerList()
  getClassifyList()
  getHotList()
})
</script>

<template>
  <view class="viewport">
    <Xtx_navbar />
    <scroll-view scroll-y class="scroll-view" @scrolltolower="onScrolltolower" refresher-enabled
      :refresher-triggered="isLoad" @refresherrefresh="load">
      <Xtx_swiper ref="Xtx_swiper_Ref" />
      <Xtx_classify ref="Xtx_classify_Ref" />
      <Xtx_hot ref="Xtx_hot_Ref" />
      <Xtx_goodslist ref="Xtx_goodslist_Ref" />
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1 !important;
  overflow: hidden;
}
</style>
